<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">异常订单</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="content">
      <div class="eltabs">
        <el-tabs v-model="tabName" @tab-click="handleClick">
          <el-tab-pane label="全部订单" name="0"></el-tab-pane>
          <el-tab-pane name="1">
            <span slot="label">
              <el-badge
                v-if="
                  $store.getters.orderCount && $store.getters.orderCount.reject
                "
                :value="$store.getters.orderCount.reject"
              >
                拒收中
              </el-badge>
              <span v-else>拒收中</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label">
              <el-badge
                v-if="
                  $store.getters.orderCount &&
                  $store.getters.orderCount.returnOfGoods
                "
                :value="$store.getters.orderCount.returnOfGoods"
              >
                退货中
              </el-badge>
              <span v-else>退货中</span>
            </span>
          </el-tab-pane>
          <el-tab-pane name="3">
            <span slot="label">
              <el-badge
                v-if="$store.getters.orderCount.beReturned"
                :value="$store.getters.orderCount.beReturned"
              >
                被退货中
              </el-badge>
              <span v-else>被退货中</span>
            </span>
          </el-tab-pane>
          <el-tab-pane label="已完成" name="4"></el-tab-pane>
          <el-tab-pane label="已关闭" name="5"></el-tab-pane>
        </el-tabs>
      </div>
      <el-collapse-transition>
        <div class="search" v-show="!show3">
          <div class="header">
            <span>查询客户</span>
            <p @click="show3 = true">收起</p>
          </div>
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="客户信息">
              <el-input
                placeholder="请输入客户手机号码/姓名"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>
            <el-form-item label="原单编号">
              <el-input
                v-model="queryForm.orderId"
                placeholder="请输入原单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input
                v-model="queryForm.orderCode"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="部门选择">
              <el-cascader
                v-model="queryForm.orgName"
                :options="options"
                :props="{
                  checkStrictly: true,
                  label: 'orgName',
                  value: 'orgPath',
                  children: 'children',
                }"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>

            <el-form-item label="客服">
              <el-select
                v-model="queryForm.service"
                placeholder="请选择客服"
                filterable
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in customer"
                  :key="items.id"
                  :label="items.reallyName"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="订单状态">
              <el-select
                v-model="queryForm.state"
                placeholder="选择订单状态"
                filterable
                clearable
                default-first-option
              >
                <el-option
                  v-for="itemsS in status"
                  :key="itemsS.dictId"
                  :label="itemsS.dictName"
                  :value="itemsS.dictId"
                ></el-option>
              </el-select>
            </el-form-item>
            <div class="selectDate">
              <span>时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="queryForm.date"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy- MM- dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </div>
            <el-button
              type="primary"
              size="mini"
              v-on:keyup.enter="searchEvent"
              @click="searchEvent"
              >搜索</el-button
            >
            <el-button type="danger" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form>
        </div>
      </el-collapse-transition>
      <div class="btnbox">
        <div>
          <el-button
            size="mini"
            type="primary"
            @click="$refs.xtable.setAllRowExpand(true)"
            >展开</el-button
          >
          <el-button
            size="mini"
            type="primary"
            plain
            @click="$refs.xtable.clearRowExpand()"
            >收起</el-button
          >
        </div>
        <el-button
          type="primary"
          size="mini"
          @click="show3 = false"
          v-if="show3"
          >搜索展开</el-button
        >
      </div>
      <div class="table">
        <vxe-table
          sync-resize
          ref="xtable"
          :data="tableData.list"
          :expand-config="{ expandAll: true }"
          :sort-config="{ trigger: 'cell' }"
          align="center"
          @checkbox-all="selectAllEvent"
          @checkbox-change="selectChangeEvent"
        >
          <!-- :checkbox-config="{ trigger: 'row', highlight: true, range: true }" -->
          <vxe-table-column type="checkbox" width="80"></vxe-table-column>
          <vxe-table-column
            type="seq"
            title="序号"
            width="55"
          ></vxe-table-column>
          <vxe-table-column type="expand">
            <template v-slot:content="{ row }">
              <div class="product">
                <p>商品</p>
                <el-table :data="row.orderReturnCommodityList">
                  <el-table-column prop="brand" label="品牌"></el-table-column>
                  <el-table-column
                    prop="commodityName"
                    label="商品名称"
                  ></el-table-column>
                  <el-table-column
                    prop="originalNumber"
                    label="原单数量"
                  ></el-table-column>
                  <el-table-column
                    prop="number"
                    label="退货数量"
                  ></el-table-column>
                  <el-table-column label="仓库收货">
                    <template slot-scope="prop">
                      <div class="scope">
                        <p>正常:{{ prop.row.receivedNo }}</p>
                        <p>破损:{{ prop.row.destroyNo }}</p>
                        <p>漏件:{{ prop.row.brokenNo }}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="单价"></el-table-column>
                  <el-table-column
                    prop="specificationName"
                    label="规格"
                  ></el-table-column>
                  <el-table-column
                    prop="total"
                    label="退货小计"
                  ></el-table-column>
                </el-table>

                <p v-if="!is_null(row.orderReturnComplimentaryList)">赠品</p>
                <el-table
                  v-if="!is_null(row.orderReturnComplimentaryList)"
                  :data="row.orderReturnComplimentaryList"
                >
                  <el-table-column prop="brand" label="品牌"></el-table-column>
                  <el-table-column
                    prop="complimentaryName"
                    label="赠品名称"
                  ></el-table-column>
                  <el-table-column
                    prop="originalNumber"
                    label="原单数量"
                  ></el-table-column>
                  <el-table-column
                    prop="number"
                    label="退货数量"
                  ></el-table-column>
                  <el-table-column label="仓库收货">
                    <template slot-scope="prop">
                      <div class="scope">
                        <p>正常:{{ prop.row.receivedNo }}</p>
                        <p>破损:{{ prop.row.destroyNo }}</p>
                        <p>漏件:{{ prop.row.brokenNo }}</p>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="单价"></el-table-column>
                  <el-table-column
                    prop="specificationName"
                    label="规格"
                  ></el-table-column>
                  <el-table-column
                    prop="total"
                    label="退货小计"
                  ></el-table-column>
                </el-table>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column
            title="编号"
            field="originalOrderId"
            min-width="200"
          >
            <template slot-scope="prop">
              <div class="scope">
                <p>原单编号:{{ prop.row.originalOrderId }}</p>
                <p>订单编号:{{ prop.row.orderId }}</p>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column title="客户" field="" min-width="120">
            <template slot-scope="prop">
              <div class="scope">
                <p>{{ prop.row.customerName }}</p>
                <p>{{ prop.row.customerPhone }}</p>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column title="订单状态" min-width="140">
            <template slot-scope="prop">
              <div class="scope">
                <p>{{ prop.row.orderStatusName }}</p>
                <p>申请人：{{ prop.row.applyName }}</p>
                <p v-if="tabName == 2">销售：{{ prop.row.applyName }}</p>
                <p v-else>销售：{{ prop.row.createdName }}</p>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column title="金额" min-width="100">
            <template slot-scope="prop">
              <div class="scope">
                <p>成交:{{ prop.row.orderMoney }}</p>
                <p>应退:{{ prop.row.shouldReturnMoney }}</p>
                <p>实退:{{ prop.row.returnMoney }}</p>
              </div>
            </template>
          </vxe-table-column>

          <vxe-table-column title="包裹单号" min-width="100">
            <template slot-scope="prop">
              <div class="scope" v-if="!is_null(prop.row.logisticsCompany)">
                <p>{{ prop.row.logisticsCompany }}</p>
                <p>{{ prop.row.parcelNumber }}</p>
              </div>

              <div class="scope" v-else>
                <p>— —</p>
              </div>
            </template>
          </vxe-table-column>

          <vxe-table-column title="仓库收货" min-width="120">
            <template slot-scope="prop">
              <div class="scope">
                <p>正常:{{ prop.row.returnTotal }}</p>
                <p>破损:{{ prop.row.destroyTotal }}</p>
                <p>漏件:{{ prop.row.brokenTotal }}</p>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column title="收货信息" show-overflow min-width="160">
            <template slot-scope="prop">
              <div class="scope">
                <p>{{ prop.row.addressName }} {{ prop.row.addressPhone }}</p>
                <p>{{ prop.row.address }}</p>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column v-if="tabName == 1" title="拒收时间" width="100">
            <template slot-scope="props">
              <p>{{ props.row.applyTime }}</p>
            </template>
          </vxe-table-column>
          <vxe-table-column v-if="tabName != 1" title="时间" width="100">
            <template slot-scope="props">
              <p>{{ props.row.applyTime }}</p>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" min-width="140">
            <template slot-scope="props">
              <div class="operation" v-if="tabName == 0">
                <!-- *******operatingStatus ******* -->
                <div
                  class="inlineDiv"
                  v-for="items in props.row.operatingStatus"
                  :key="items"
                >
                  <!-- 拒收中 -->
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      props.row.orderType == 0 &&
                      items == 3 &&
                      parArray.indexOf('returendeTrueCode') != -1
                    "
                    @click="returningTrue(props.row)"
                  >
                    确认
                  </p>
                  <!-- 拒收中 -->
                  <!-- 被退货 -->
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      props.row.orderType == 1 &&
                      items == 2 &&
                      parArray.indexOf('returendeTrueCode') != -1
                    "
                    @click="todetail(props.row, 1)"
                  >
                    修改
                  </p>

                  <!-- 员工审核  被退货 有填写价格弹框 -->
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      props.row.orderType == 1 &&
                      items == 1 &&
                      parArray.indexOf('returendeTrueCode') != -1
                    "
                    @click="staffTrue(props.row)"
                  >
                    确认
                  </p>
                  <!-- 员工审核 被退货有填写价格弹框 -->
                  <!-- 经理审核 被退货无弹框 -->
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      props.row.orderType == 1 &&
                      parArray.indexOf('returendeTrueCode') != -1 &&
                      items == 1
                    "
                    @click="returningTrue(props.row)"
                  >
                    确认
                  </p>

                  <p
                    v-if="
                      parArray.indexOf('approvalBtnCode') != -1 && items == 3
                    "
                    @click="approvalBtn(props.row, 1)"
                  >
                    批准
                  </p>
                  <p
                    v-if="parArray.indexOf('backReturning') != -1 && items == 3"
                    @click="approvalBtn(props.row, 2)"
                  >
                    驳回
                  </p>
                  <!-- 经理审核 被退货无弹框 -->
                  <!-- 被退货 -->
                  <!-- 退货中 -->
                  <p
                    v-if="
                      props.row.exType == 0 &&
                      items == 1 &&
                      parArray.indexOf('unFixCode') != -1
                    "
                    @click="todetail(props.row, 1)"
                  >
                    修改
                  </p>
                  <p
                    v-if="
                      props.row.exType == 0 &&
                      items == 2 &&
                      parArray.indexOf('approvalBtnCode') != -1 &&
                      !(
                        props.row.exType == '0' &&
                        parArray.indexOf('confirmReceiptCode') != -1 &&
                        props.row.orderStatus != 2 &&
                        items == 2
                      )
                    "
                    @click="approvalBtn(props.row, 1)"
                  >
                    批准
                  </p>
                  <p
                    v-if="
                      props.row.exType == 0 &&
                      items == 2 &&
                      parArray.indexOf('backReturning') != -1
                    "
                    @click="approvalBtn(props.row, 2)"
                  >
                    驳回
                  </p>

                  <p
                    v-if="
                      props.row.exType == 0 &&
                      items == 3 &&
                      parArray.indexOf('returnNoCode') != -1
                    "
                    @click="returnedCode(props.row)"
                  >
                    单号
                  </p>

                  <p
                    v-if="
                      props.row.exType == '0' &&
                      parArray.indexOf('confirmReceiptCode') != -1 &&
                      props.row.orderStatus != 2 &&
                      items == 2
                    "
                    @click="confirmReceipt(props.row)"
                  >
                    确定收货
                  </p>

                  <p
                    v-if="props.row.exType == 0 && items != 2"
                    @click="logistDetail(props.row.parcelNumber)"
                  >
                    物流
                  </p>
                  <!-- 退货中 -->
                  <!--退货中关闭与恢复  A 关闭  X恢复-->
                  <p
                    v-if="
                      props.row.exType == '0' &&
                      props.row.type == 'A' &&
                      items == 4 &&
                      parArray.indexOf('closeRecoveryCode') != -1
                    "
                    @click="closeRecovery(props.row)"
                  >
                    关闭
                  </p>
                  <p
                    v-if="
                      props.row.exType == '0' &&
                      props.row.type == 'X' &&
                      items == 4 &&
                      parArray.indexOf('RecoveryCode') != -1
                    "
                    @click="closeRecovery(props.row)"
                  >
                    恢复
                  </p>
                  <!--退货中关闭与恢复-->

                  <!--拒收或被退回关闭与恢复-->
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      items == 5 &&
                      props.row.type == 'A' &&
                      parArray.indexOf('returnCloseRecoveryCode') != -1
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    关闭
                  </p>
                  <p
                    v-if="
                      props.row.exType == 1 &&
                      items == 5 &&
                      props.row.type == 'X' &&
                      parArray.indexOf('returnRecoveryCode') != -1
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    恢复
                  </p>
                  <!--拒收或被退回关闭与恢复-->
                </div>
                <!-- *******operatingStatus ******* -->

                <!--全部（退货中） -->
                <p
                  v-if="parArray.indexOf('detailCode') != -1"
                  @click="todetail(props.row, 2)"
                >
                  详情
                </p>
                <p
                  v-if="
                    (props.row.exType == 0 &&
                      parArray.indexOf('polliingCode') != -1 &&
                      props.row.proInsId) ||
                    (props.row.exType == 1 &&
                      props.row.orderType == 1 &&
                      parArray.indexOf('polliingCode') != -1 &&
                      props.row.proInsId)
                  "
                  @click="polliingClick(props.row)"
                >
                  流程
                </p>
                <!--全部（退货中） -->
              </div>
              <!-- 全部订单 **<结尾> **全部订单-->

              <!-- 拒收中按钮 -->
              <div class="operation" v-if="tabName == 1">
                <p
                  v-if="parArray.indexOf('detailCode') != -1"
                  @click="todetail(props.row, 2)"
                >
                  详情
                </p>
                <!-- <p
                  v-if="parArray.indexOf('polliingCode') != -1"
                  @click="polliingClick(props.row)"
                >
                  流程
                </p> -->

                <div
                  class="inlineDiv"
                  v-for="items in props.row.operatingStatus"
                  :key="items"
                >
                  <p
                    v-if="
                      parArray.indexOf('returendeTrueCode') != -1 && items == 4
                    "
                    @click="returningTrue(props.row)"
                  >
                    确认
                  </p>

                  <p
                    v-if="
                      props.row.type == 'A' &&
                      parArray.indexOf('returnCloseRecoveryCode') != -1 &&
                      items == 5
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    关闭
                  </p>
                  <p
                    v-if="
                      props.row.type == 'X' &&
                      parArray.indexOf('returnRecoveryCode') != -1 &&
                      items == 5
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    恢复
                  </p>
                </div>
              </div>
              <!-- 拒收中按钮 -->

              <!-- 被退货 1、员工修改提交 	2、经理、总监审批 -->
              <div class="operation" v-if="tabName == 3">
                <p
                  v-if="parArray.indexOf('detailCode') != -1"
                  @click="todetail(props.row, 2)"
                >
                  详情
                </p>
                <p
                  v-if="
                    parArray.indexOf('polliingCode') != -1 && props.row.proInsId
                  "
                  @click="polliingClick(props.row)"
                >
                  流程
                </p>

                <div
                  class="inlineDiv"
                  v-for="items in props.row.operatingStatus"
                  :key="items"
                >
                  <p
                    v-if="parArray.indexOf('unFixCode') != -1 && items == 1"
                    @click="todetail(props.row, 1)"
                  >
                    修改
                  </p>

                  <p
                    v-if="
                      parArray.indexOf('returendeTrueCode') != -1 &&
                      items == 1 &&
                      props.row.orderType == 1 &&
                      props.row.exType == 1
                    "
                    @click="staffTrue(props.row)"
                  >
                    确认
                  </p>
                  <p
                    v-if="
                      parArray.indexOf('approvalBtnCode') != -1 && items == 3
                    "
                    @click="approvalBtn(props.row, 1)"
                  >
                    批准
                  </p>
                  <p
                    v-if="parArray.indexOf('backReturning') != -1 && items == 3"
                    @click="approvalBtn(props.row, 2)"
                  >
                    驳回
                  </p>
                  <p
                    v-if="
                      props.row.type == 'A' &&
                      parArray.indexOf('returnCloseRecoveryCode') != -1 &&
                      items == 5
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    关闭
                  </p>
                  <p
                    v-if="
                      props.row.type == 'X' &&
                      parArray.indexOf('returnRecoveryCode') != -1 &&
                      items == 5
                    "
                    @click="returnCloseRecovery(props.row)"
                  >
                    恢复
                  </p>
                </div>
              </div>

              <!-- 退货中 orderTask 1：员工修改提交 	2：经理审批  		3：填写单号  4：物流审批（确认收货）-->
              <div class="operation" v-if="tabName == 2">
                <p
                  v-if="
                    parArray.indexOf('polliingCode') != -1 && props.row.proInsId
                  "
                  @click="polliingClick(props.row)"
                >
                  流程
                </p>
                <p
                  v-if="parArray.indexOf('detailCode') != -1"
                  @click="todetail(props.row, 2)"
                >
                  详情
                </p>

                <div
                  class="inlineDiv"
                  v-for="items in props.row.operatingStatus"
                  :key="items"
                >
                  <p
                    v-if="
                      parArray.indexOf('approvalBtnCode') != -1 &&
                      items == 2 &&
                      !(
                        parArray.indexOf('confirmReceiptCode') != -1 &&
                        items == 2 &&
                        props.row.orderStatus != 2
                      )
                    "
                    @click="approvalBtn(props.row, 1)"
                  >
                    批准
                  </p>
                  <p
                    v-if="parArray.indexOf('backReturning') != -1 && items == 2"
                    @click="approvalBtn(props.row, 2)"
                  >
                    驳回
                  </p>
                  <p
                    v-if="parArray.indexOf('unFixCode') != -1 && items == 1"
                    @click="todetail(props.row, 1)"
                  >
                    修改
                  </p>
                  <p
                    v-if="parArray.indexOf('returnNoCode') != -1 && items == 3"
                    @click="returnedCode(props.row)"
                  >
                    单号
                  </p>
                  <p
                    v-if="
                      parArray.indexOf('confirmReceiptCode') != -1 &&
                      items == 2 &&
                      props.row.orderStatus != 2
                    "
                    @click="confirmReceipt(props.row)"
                  >
                    确定收货
                  </p>
                  <p
                    v-if="
                      props.row.type == 'A' &&
                      parArray.indexOf('closeRecoveryCode') != -1 &&
                      items == 4
                    "
                    @click="closeRecovery(props.row)"
                  >
                    关闭
                  </p>
                  <p
                    v-if="
                      props.row.type == 'X' &&
                      parArray.indexOf('RecoveryCode') != -1 &&
                      items == 4
                    "
                    @click="closeRecovery(props.row)"
                  >
                    恢复
                  </p>
                </div>
              </div>

              <!-- #### 关闭列表 ####-->
              <div class="operation" v-if="tabName == 5">
                <!--退货中关闭与恢复  A 关闭  X恢复-->
                <p
                  v-if="
                    props.row.exType == '0' &&
                    props.row.type == 'A' &&
                    parArray.indexOf('closeRecoveryCode') != -1
                  "
                  @click="closeRecovery(props.row)"
                >
                  关闭
                </p>
                <p
                  v-if="
                    props.row.exType == '0' &&
                    props.row.type == 'X' &&
                    parArray.indexOf('RecoveryCode') != -1
                  "
                  @click="closeRecovery(props.row)"
                >
                  恢复
                </p>
                <!--退货中关闭与恢复-->

                <!--拒收或被退回关闭与恢复-->
                <p
                  v-if="
                    props.row.exType == 1 &&
                    props.row.type == 'A' &&
                    parArray.indexOf('returnCloseRecoveryCode') != -1
                  "
                  @click="returnCloseRecovery(props.row)"
                >
                  关闭
                </p>
                <p
                  v-if="
                    props.row.exType == 1 &&
                    props.row.type == 'X' &&
                    parArray.indexOf('returnRecoveryCode') != -1
                  "
                  @click="returnCloseRecovery(props.row)"
                >
                  恢复
                </p>
                <!--拒收或被退回关闭与恢复-->
              </div>

              <div class="operation" v-if="tabName == 4">
                <p @click="todetail(props.row, 2)">详情</p>
                <p v-if="props.row.proInsId" @click="polliingClick(props.row)">
                  流程
                </p>
                <p @click="logistDetail(props.row.parcelNumber)">物流</p>
              </div>

              <!-- #### 关闭列表 ####-->
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
      <div style="height: 40px"></div>
      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNO"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalNum"
            prev-text="上一页"
            next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
    <!-- 添加退货单号 -->
    <el-dialog
      :visible.sync="logistFillin"
      :append-to-body="true"
      title="提交退货单号填写"
      @close="logisticsCompany = ''"
    >
      <div class="fontTemp">
        <p><span>*</span>退货单号:</p>
        <div>
          <el-select
            v-model="logisticsCompany"
            placeholder="快递公司"
            filterable
            clearable
          >
            <el-option
              v-for="itemsS in companys"
              :key="itemsS.dictName"
              :label="itemsS.dictName"
              :value="itemsS.dictName"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-input
            type="text"
            placeholder="请输入包裹物流单号"
            v-model="logistCode"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          @click="
            logistFillin = false;
            logistSumbit();
          "
          >确 定</el-button
        >
        <el-button size="mini" type="primary" @click="logistFillin = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加退货单号 -->

    <!-- 退货中批准驳回弹框 -->
    <el-dialog
      :visible.sync="ifapproval"
      :append-to-body="true"
      :title="approvalTitle"
    >
      <div class="text">
        <el-input type="textarea" v-model="proposal"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="ifapproval = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          v-if="result == 1"
          @click="
            ifapproval = false;
            approvalHandle('1');
          "
          >确定</el-button
        >

        <el-button
          size="mini"
          type="primary"
          v-if="result == 2"
          @click="
            ifapproval = false;
            approvalHandle('1');
          "
          >驳回</el-button
        >
      </div>
    </el-dialog>
    <!-- 退货中批准驳回弹框 -->
    <!-- 查询流程 -->
    <el-dialog
      :visible.sync="dialogFormPolliing"
      :append-to-body="true"
      title="审核过程"
    >
      <el-table :data="polliing" style="width: 100%">
        <el-table-column type="index" label="步骤" width="50"></el-table-column>
        <el-table-column
          label="任务节点"
          prop="taskName"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="办理人"
          prop="assignee"
          width="110"
        ></el-table-column>
        <el-table-column
          label="审批开始时间"
          prop="startTime"
        ></el-table-column>
        <el-table-column label="审批结束时间">
          <template slot-scope="props">
            <span v-if="!is_null(props.row.endTime)">{{
              props.row.endTime
            }}</span>
            <span v-if="is_null(props.row.endTime)">正在处理中...</span>
          </template>
        </el-table-column>
        <el-table-column label="审批意见" :show-overflow-tooltip="true">
          <template slot-scope="props">
            <span v-if="!is_null(props.row.comment)">{{
              props.row.comment
            }}</span>
            <span v-if="is_null(props.row.comment)">/</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormPolliing = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 物流订单号追踪节点 -->
    <el-dialog
      :visible.sync="logisPoper"
      :append-to-body="true"
      title="物流查询详情"
    >
      <p class="logHeader">
        <el-image :src="logistlist.logo" alt="" fit="contain">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <span>{{ logistlist.expTextName }}</span>
        <span>{{ logistlist.mailNo }}</span>
      </p>
      <div class="trackingNode">
        <el-steps direction="vertical" :active="0">
          <el-step
            v-for="(pre, index) in logistlist.data"
            :key="index"
            class="stepSuc"
            style="line-height: 25px"
            :title="'审批人' + pre.context"
            :description="pre.time"
          />
        </el-steps>
      </div>
    </el-dialog>
    <!-- 物流订单号追踪节点 -->
    <!-- 被退货价格填写修改 -->
    <el-dialog
      :visible.sync="staffIf"
      :append-to-body="true"
      title="确定确认被退货中的订单"
    >
      <p class="fontTemp">应退金额：{{ row.shouldReturnMoney }}</p>

      <div class="fontTemp">
        <p><span>*</span>实退金额:</p>
        <div>
          <el-input
            type="text"
            placeholder="请输入实退金额"
            v-model="staffSalay"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          @click="
            staffIf = false;
            staffSalayEvent();
          "
          >确 定</el-button
        >
        <el-button size="mini" type="primary" @click="staffIf = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 被退货价格填写修改 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      show3: false,
      tabName: "0",
      queryForm: {
        info: "",
        orderCode: "", //tui
        orderId: "", //原单编号
        orgName: "",
        state: "",
        date: "",
        service: "",
      },
      pageNO: 1,
      pageSize: 10,
      options: [],
      status: [], //订单类型
      tableData: [],
      height: "500px",
      multipleSelection: [],
      beginTime: "",
      endTime: "",
      companys: [],
      logistFillin: false,
      logisticsCompany: "",
      logistCode: "",
      ifapproval: false, //退货中 批准驳货操作弹框
      approvalTitle: "确定批准退货中的订单",
      proposal: "", //备注
      polliing: [], //查询流程
      dialogFormPolliing: false,
      orderIds: [], //审批orderIds
      procInstId: [],
      result: 1, //1是批准，2驳回
      logistlist: [],
      logisPoper: false, //物流信息弹框
      staffIf: false,
      staffSalay: "",
      limits: "",
      parArray: [],
      row: "",
      customer: [],
      salesAuthorityId: JSON.parse(sessionStorage.getItem("salesAuthorityId")),
    };
  },
  mounted () {
    let self = this;
    let ph = document.documentElement.clientHeight;
    self.height =
      ph -
      (335 + document.getElementsByClassName("el-form")[0].clientHeight) +
      "px";
    window.onresize = function () {
      let ph = document.documentElement.clientHeight;
      self.height =
        ph -
        (335 + document.getElementsByClassName("el-form")[0].clientHeight) +
        "px";
    };
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "unusualOrderCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断

    this.department();
    this.logisticsExpress();
    this.customerlist();

    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };

    this.initTabs() // 初始化TAB数据
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  activated () {
    /*
    this.department();
    this.logisticsExpress();
    this.tabName = this.$route.query.tabName;
    if (this.is_null(this.tabName)) {
      this.tabName = "0";
    }
    if (this.tabName == 0) {
      this.wholeOrder();
    } else if (this.tabName == 1) {
      this.rejectionList(0, 1); //拒收
    } else if (this.tabName == 2) {
      this.returningList();
    } else if (this.tabName == 3) {
      this.rejectionList(1, 1); //拒收
    }
    */
  },
  methods: {

    initTabs () {
      console.time("初始化TAB数据")
      const unOrderTab = JSON.parse(sessionStorage.getItem('unOrderTab'))
      if (!this.is_null(this.$route.query.tabName)) {
        this.tabName = this.$route.query.tabName;
        // console.log(this.tabName)
      } else if (unOrderTab) {
        this.tabName = unOrderTab.name
        // console.log(this.tabName)
      } else {
        console.log('异常订单')
      }
      // console.log(this.tabName)

      if (this.tabName == 0) {
        this.wholeOrder();
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //拒收
      }
      console.timeEnd("初始化TAB数据")
    },
    getOrderSum () {
      this.axios
        .get("/order/order/return/taskNumber", { isLoading: false })
        .then((res) => {
          this.$store.dispatch("addOrderCount", res.data);
        });
    },
    // 客服下拉框数据
    customerlist () {
      this.axios
        .get(
          "/sys/v1/user/employee/by/sales/authority?salesAuthorityId=" +
          JSON.parse(sessionStorage.getItem("salesAuthorityId").split(",")),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          ////console.log(res);
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },

    handleClick (tab) {
      const tabObj = { index: tab.index, label: tab.label, name: tab.name, paneName: tab.paneName }
      // this.currentTab = tabObj
      // 缓存后，可以在刷新后还可以保留在当前tab
      sessionStorage.setItem('unOrderTab', JSON.stringify(tabObj))
      let tab1 = tab.name;
      this.pageNO = 1;
      this.pageSize = 10;
      this.tableData = [];
      this.tabName = tab1;
      if (this.tabName == 0) {
        this.wholeOrder("", "");
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //被退货
      } else if (this.tabName == 4) {
        this.wholeOrder(2, "A");
      } else if (this.tabName == 5) {
        this.wholeOrder("", "X");
      }
    },
    /**
     * 搜索
     **/
    searchEvent () {
      this.beginTime = "";
      this.endTime = "";
      if (this.queryForm.date) {
        this.beginTime = this.queryForm.date[0] + " 00:00:00";
        this.endTime = this.queryForm.date[1] + " 23:59:59";
      }
      this.pageNO = 1;
      this.pageSize = 10;
      this.tableData = [];

      if (this.tabName == 0) {
        this.wholeOrder("", "");
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //被退货
      } else if (this.tabName == 4) {
        this.wholeOrder(2, "A");
      } else if (this.tabName == 5) {
        this.wholeOrder("", "X");
      }
      // this.queryForm = {
      //   info: "",
      //   orderCode: "", //tui
      //   orderId: "", //原单编号
      //   orgName: "",
      //   state: "",
      //   date: "",
      // };
    },
    /**
     * 搜索
     **/
    /***所有异常列表***/
    wholeOrder (returnStatus, returnType) {
      this.axios
        .post("/order/order/return/findAllExceptionOrder", {
          request: {
            city: "",
            customerServiceId: this.queryForm.service,
            dataScope: "",
            endApplyTime: this.endTime,
            keyWork: this.queryForm.info.trim(),
            logisticsCompany: "",
            orderId: this.queryForm.orderId.trim(),
            orgPath: this.queryForm.orgName[this.queryForm.orgName.length - 1], //部门
            pageNo: this.pageNO,
            pageSize: this.pageSize,
            parcelNumber: "",
            province: "",
            region: "",
            returnOrderId: this.queryForm.orderCode.trim(),
            returnStatus: returnStatus, //（1-退货中，2-退货完成）")
            returnType: returnType, // A-正常 X-删除")
            startApplyTime: this.beginTime,
          },
          version: "",
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /***所有异常列表***/
    /** 查询退货中列表 **/
    returningList (returnStatus) {
      this.axios
        .post("/order/order/return/returnGoods/list", {
          request: {
            city: "",
            customerServiceId: this.queryForm.service,
            dataScope: "",
            endApplyTime: this.endTime,
            keyWork: this.queryForm.info.trim(),
            logisticsCompany: "",
            orderId: this.queryForm.orderId.trim(),
            orgPath: this.queryForm.orgName[this.queryForm.orgName.length - 1], //部门
            pageNo: this.pageNO,
            pageSize: this.pageSize,
            parcelNumber: "",
            province: "",
            region: "",
            returnOrderId: this.queryForm.orderCode.trim(),
            returnStatus: returnStatus,
            returnType: "A",
            startApplyTime: this.beginTime,
          },
          version: "",
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /** 查询退货中列表 **/

    /** 查询拒收中列表 **/
    rejectionList (orderType, rejectStatus) {
      this.axios
        .post("/order/order/reject/list", {
          city: "",
          customerId: this.queryForm.service,
          endTime: this.endTime,
          keyWork: this.queryForm.info.trim(),
          logisticsCompany: "",
          orderId: this.queryForm.orderId.trim(),
          orderType: orderType, //订单类型（0:拒收 1:被退货）
          orgPath: this.queryForm.orgName[this.queryForm.orgName.length - 1], //部门
          pageNo: this.pageNO,
          pageSize: this.pageSize,
          parcelNumber: "",
          province: "",
          region: "",
          rejectId: this.queryForm.orderCode.trim(),
          rejectStatus: rejectStatus, //订单状态（1：申请中 2：已完成）
          startTime: this.beginTime,
          type: "A",
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          }
        });
    },
    /** 查询拒收中列表 **/

    /**
     * 拒收中 或 被退货的确认
     * exType ==1 && orderType==0 拒收
     * exType ==1 && orderType==1 被退货
     * **/
    returningTrue (row) {
      let title = "";
      if (row.exType == 1 && row.orderType == 0) {
        title = "确定确认拒收中订单";
      } else {
        title = "确定确认被退货中订单";
      }
      this.$msgbox({
        title: "确定",
        message: "确定确认订单",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      })
        .then((res) => {
          this.axios
            .post(
              "/order/order/reject/confirmReject",
              {
                orderType: row.exType,
                rejectId: row.orderId,
              },
              {
                headers: {
                  isLoading: false,
                },
              }
            )
            .then((res) => {
              if (res.code == 0) {
                this.getOrderSum();
                this.$message.success("拒收成功");
                if (this.tabName == 0) {
                  this.wholeOrder();
                } else {
                  this.rejectionList(0, 1);
                }
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => { });
    },
    /**拒收中的确认**/

    /**退货中 确定收货**/
    confirmReceipt (row) {
      this.$router.push({
        name: "confirmReceipt",
        query: {
          id: row.id,
          returnOrderId: row.orderId,
          tabName: this.tabName
        },
      });
    },
    /**退货中 确定收货**/
    /** 被退货 员工确认 **/
    staffTrue (row) {
      // console.log(row);
      this.staffSalay = "";
      this.staffIf = true;
      this.row = row;
      // this.showreturnsalay=row.shouldReturnMoney;
    },
    staffSalayEvent () {
      if (!this.is_null(this.staffSalay)) {
        this.axios
          .post(
            "/order/order/reject/update",
            {
              comment: "",
              proInsId: this.row.proInsId,
              rejectId: this.row.orderId,
              returnMoney: this.staffSalay,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.getOrderSum();
              this.$message.success("处理成功");
              if (this.tabName == 0) {
                this.wholeOrder();
              } else {
                this.rejectionList(1, 1);
              }
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("退货金额不能为空");
      }
    },
    /** 被退货 员工确认 **/
    /** 跳转详情 与修改 **/
    todetail (row, param) {
      if (param == 2 && !row.orderType) {
        row.orderType = param;
      }
      this.$router.push({
        name: "returned",
        query: {
          exType: row.exType, //0-退货订单,1 - 被退货,拒收
          orderType: row.orderType, //订单类型 exType = 1（(拒收)0:拒收 1:被退货） 退货（1微商 2客户）
          type: row.type,
          id: row.id,
          fixDetail: param, // param 1修改 2详情
          tabName: this.tabName,
        },
      });
    },
    /** 填写单号 **/
    returnedCode (row) {
      this.logistFillin = true;
      this.logId = row.orderId;
      this.logistCode = "";
    },
    // 提交
    logistSumbit () {
      this.axios
        .post(
          "/order/order/return/write/logisticsNo",
          {
            request: {
              logisticsCompany: this.logisticsCompany,
              parcelNumber: this.logistCode,
              returnOrderId: this.logId,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            if (this.tabName == 0) {
              this.getOrderSum();
              this.$message.success("填写成功");
              this.wholeOrder();
            } else {
              this.returningList();
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /** 填写单号 **/
    /** 批准 （退货中）**/
    approvalBtn (row, result) {
      this.proposal = "";
      this.procInstId = [];
      this.orderIds = [];
      this.result = result;
      if (result == 1) {
        this.approvalTitle = "确定批准退货中的订单";
      } else if (result == 2) {
        this.approvalTitle = "确定驳回退货中的订单";
      }
      this.ifapproval = true;
      this.orderIds.push(row.orderId);
      this.orderType = row.exType;
      this.procInstId.push(row.proInsId);
    },
    //批准 驳回操作
    approvalHandle () {
      this.axios
        .post("/order/order/reject/commit", {
          proInsIds: this.procInstId, //任务id
          comment: this.proposal,
          orderIds: this.orderIds,
          orderType: this.orderType, // 0：退货订单 1：被退货订单"
          result: this.result, // 1：批准 2：驳回"
        })
        .then((res) => {
          console.log(res);
          this.orderIds = [];
          this.proInsIds = [];
          if (res.code == 0) {
            this.getOrderSum();
            this.$message.success("处理成功");
            if (this.tabName == 0) {
              this.wholeOrder();
            } else {
              this.returningList();
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /** 批准 （退货中）**/
    /**流程查看**/
    polliingClick (row) {
      this.polliing = [];
      this.dialogFormPolliing = true;
      this.axios
        .get("/order/order/user/selectHiTask?taskId=" + row.proInsId, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.getOrderSum();
            this.polliing = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /**物流详情**/
    logistDetail (id) {
      this.logisPoper = true;
      this.axios
        .get("/order/logistics/node/tracking/" + id, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // ////console.log(res);
          if (res.code == 0) {
            // ////console.log('物流节点');
            this.logistlist = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /**物流详情**/
    /**关闭恢复**/
    closeRecovery (row) {
      this.$msgbox({
        title: "关闭/恢复操作",
        message: "确定执行该操作",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      })
        .then((res) => {
          this.axios
            .get("/order/order/return/close/recovery?id=" + row.orderId, {
              headers: {
                isLoading: false,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.getOrderSum();
                this.$message.success("执行成功");
                if (this.tabName == 0) {
                  this.wholeOrder();
                } else {
                  this.wholeOrder("", "X");
                }
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => { });
    },
    // 拒收与被退 关闭恢复
    returnCloseRecovery (row) {
      this.$msgbox({
        title: "关闭/恢复操作",
        message: "确定执行该操作",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      })
        .then((res) => {
          this.axios
            .get("/order/order/reject/close/recovery?id=" + row.orderId, {
              headers: {
                isLoading: false,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.getOrderSum();
                this.$message.success("执行成功");
                if (this.tabName == 0) {
                  this.wholeOrder();
                } else {
                  this.wholeOrder("", "X");
                }
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => { });
    },
    /**关闭恢复**/
    // 部门选择列表
    department () {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 重置
    reset () {
      this.pageNO = 1;
      this.pageSize = 10;
      this.queryForm = {
        info: "",
        orderCode: "", //tui
        orderId: "", //原单编号
        orgName: "",
        state: "",
        date: [],
        service: "",
      };
      this.beginTime = "";
      this.endTime = "";
      if (this.tabName == 0) {
        this.wholeOrder("", "");
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //被退货
      } else if (this.tabName == 4) {
        this.wholeOrder(2, "A");
      } else if (this.tabName == 5) {
        this.wholeOrder("", "X");
      }
    },
    // 表格多选
    selectAllEvent ({ checked, records }) {
      this.multipleSelection = records;
    },
    selectChangeEvent ({ checked, records }) {
      this.multipleSelection = records;
    },
    /**
     *分页
     **/
    handleCurrentChange (val) {
      this.pageNO = val;
      if (this.tabName == 0) {
        this.wholeOrder("", "");
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //被退货
      } else if (this.tabName == 4) {
        this.wholeOrder(2, "A");
      } else if (this.tabName == 5) {
        this.wholeOrder("", "X");
      }
    },
    handleSizeChange (val) {
      this.pageSize = val;
      if (this.tabName == 0) {
        this.wholeOrder("", "");
      } else if (this.tabName == 1) {
        this.rejectionList(0, 1); //拒收
      } else if (this.tabName == 2) {
        this.returningList();
      } else if (this.tabName == 3) {
        this.rejectionList(1, 1); //被退货
      } else if (this.tabName == 4) {
        this.wholeOrder(2, "A");
      } else if (this.tabName == 5) {
        this.wholeOrder("", "X");
      }
    },

    /**
     * 查询物流快递公司
     **/
    logisticsExpress () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=courier_company", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.companys = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    /**
     * 查询物流快递公司
     **/

    /**
     *分页
     **/
    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-table__header {
  width: 100% !important;
}

/deep/.el-table__body {
  width: 100% !important;
}

.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

/deep/.el-badge {
  margin-top: 0;
  /deep/.el-badge__content {
    top: 7px;
  }
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.eltabs {
  background: #fff;
  padding: 0 20px;
  border-radius: 8px;

  /deep/ .el-tabs__header {
    margin: 0;
  }
}

.search {
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    span {
      font-size: 15px;

      color: #333;
    }
    p {
      font-size: 12px;
      color: #2d7edf;
    }
    p:hover {
      cursor: pointer;
    }
  }
}

.operation {
  .inlineDiv {
    display: inline-block;
  }

  .leftBorder {
    border-left: 1px solid #d9d9d9;
  }

  p {
    display: inline-block;
    font-size: 14px;
    color: #4168e7;
    height: 15px;
    line-height: 15px;
    padding: 0 10px;
  }

  p:hover {
    cursor: pointer;
  }
}

/deep/.table .vxe-body--row {
  background: #ebf0f9;
  color: #000;
}

.btnbox {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

/deep/.vxe-body--expanded-cell {
  padding: 10px;
}

.product {
  > p {
    font-size: 14px;
    color: #4168e7;
    line-height: 40px;
  }
}

// .table {
//   margin-bottom: 40px;
// }

.page {
  // margin: 20px 0;
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}

/deep/.el-table thead {
  color: #333;
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}

/deep/.el-table--fit {
  border: 1px solid #e6ebf5;
}

.fontTemp {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 0px;

  p {
    span {
      color: #ff5656;
    }

    font-size: 14px;
    color: #666666;
  }

  > div {
    margin-left: 10px;

    /deep/.el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    /deep/.el-input__icon {
      height: 30px;
      line-height: 30px;
    }
  }
}

/deep/.el-dialog__header {
  background: #409eff;
  padding: 10px 20px 10px;

  .el-dialog__title {
    color: #fff;
  }
}

/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.logHeader {
  /deep/.el-image {
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    height: 60px;
  }

  span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
  }
}

.trackingNode {
  height: 400px;
  overflow-y: scroll;
}
</style>
